<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/index.css">
    <script type="text/javascript" src="static/js/index.js"></script>
    <script type="text/javascript" src="static/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        // jQ, 页面加载时执行的加载代码
        $(function () {
            // getUserList();
            getUser();
        })

        // 学生信息展示
        function getUser() {
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/userList",
                type: "GET",
                // 响应的数据类型
                dataType: "json",
                // 成功时回调函数
                success: function (data) {
                    // console.log(data)
                    // jQ 通过字符拼接的方法生成html元素
                    var info = `<table id="table1">
                        <tr>
                            <td>地址</td>
                            <td>出生日期</td>
                            <td>电子邮箱</td>
                            <td>年级</td>
                            <td>身份证号</td>
                            <td>登录密码</td>
                            <td>电话号码</td>
                            <td>性别</td>
                            <td>学生姓名</td>
                            <td>学号</td>
                            <td colspan="2">操作</td>
                        </tr>`
                    for (const datum of data) {
                        // console.log(datum)
                        info += `
                        <tr>
                            <td>${datum.address}</td>
                            <td>${datum.bornDate}</td>
                            <td>${datum.email}</td>
                            <td>${datum.gradeId}</td>
                            <td>${datum.identityCard}</td>
                            <td>${datum.loginPwd}</td>
                            <td>${datum.phone}</td>
                            <td>${datum.sex}</td>
                            <td>${datum.studentName}</td>
                            <td>${datum.studentNo}</td>
                            <td><a href="index.html?studengNo=${datum.studentNo}">修改</a></td>
                            <td><a href="#" onclick="delUserViaStudentNo2(${datum.studentNo})">删除</a></td>
                        </tr>
                        `
                    }
                    info += `</table>`
                    // jQ 将组合好的元素插入(replace)到div
                    $("#list").html(info)
                }
            })
        }

        function delUserViaStudentNo2(studentNo) {
            console.log(studentNo)
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/userDel",
                type: "POST",
                dataType: "json",
                data: {'studentNo': studentNo},
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    // location.reload()
                    getUser()
                }
            })
        }

        function addUser() {
            console.log()
            $.ajax({
                url: "http://localhost:8080/webProject_war_exploded/userAdd",
                type: "POST",
                dataType: "json",
                data: {
                    // jQ, 使用 $('#id').val() 的方式直接获取input中的值
                    'loginPwd': $('#loginPwd').val(),
                    'studentName': $('#studentName').val(),
                    'phone': $('#phone').val(),
                    'identityCard': $('#identityCard').val()
                },
                success: function (data) {
                    console.log(data)
                    alert(data)
                    // 使用alert阻塞自动刷新
                    // location.reload()
                    getUser()
                }
            })
        }
    </script>
</head>
<body>
<h3 id="p1"></h3>
<button type="button" onclick="getUserList()">Click Me to List User!</button>
<table id="table1"></table>
<div id="list"></div>
<div id="add">
    <form>
        <table>
            <tr>
                <td colspan="5">添加学生</td>
            </tr>
            <tr>
                <td>登录密码</td>
                <td>学生姓名</td>
                <td>手机号</td>
                <td>身份证号</td>
                <td>操作</td>
            </tr>
            <tr>
                <td><label for="loginPwd"></label><input id="loginPwd"></td>
                <td><label for="studentName"></label><input id="studentName"></td>
                <td><label for="phone"></label><input id="phone"></td>
                <td><label for="identityCard"></label><input id="identityCard"></td>
                <td>
                    <button type="button" onclick="addUser()">添加</button>
                </td>
            </tr>
        </table>
    </form>
</div>

<br>
<label for="inputID"><input type="text" id="inputID"></label>
<p id="deleteState"></p>
<button type="button" onclick="delUserViaID()">删除用户</button>

</body>
</html>